<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>chat</title>
    <link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
    <style>
    .input-pre {
        margin: 5px 3px;
    }
    </style>
</head>

<body ontouchstart="">
        <header>
            <div class="titlebar">
                <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
                <h1 class="titlebar-title">产品部讨论群</h1>
            </div>
        </header>
        <article style="padding-bottom:47px;">
            <ul class="chat" id="ID-Chats">
                <li>
                    <div class="chat-photo">
                        <div class="photo size40 radiusround">
                            <i class="icon icon-user-fill"></i>
                        </div>
                    </div>
                    <div class="chat-content-box">
                        <div class="chat-content">
                            <span class="chat-content-author">张三</span>
                            <p>Hello!<span data-emoji="[weixiao]"></span></p>
                        </div>
                    </div>
                </li>
                <li class="even">
                    <div class="chat-photo">
                        <div class="photo size40 radiusround">
                            <i class="icon icon-user-fill"></i>
                        </div>
                    </div>
                    <div class="chat-content-box">
                        <div class="chat-content">
                            <p>啥？你说滴是啥？那啥啥啥东西啊？咋看不懂啊，你说滴到底是个啥？</p>
                        </div>
                    </div>
                </li>
            </ul>
        </article>
        <footer>
            <!--底部富文本输入框-->
            <figure id="ID-RichInput" class="richedit">
                <!--轮播-->
                <div class="slider-container emoji" id="ID-RichInput-slider">
                    <div class="slider-wrapper">
                    <div class="slider-slide">
                        <a data-emoji="[weixiao]" alt="[微笑]"></a>
                        <a data-emoji="[nanguo]" alt="[难过]"></a>
                        <a data-emoji="[se]" alt="[色]"></a>
                        <a data-emoji="[fadai]" alt="[发呆]"></a>
                        <a data-emoji="[cool]" alt="[酷]"></a>
                        <a data-emoji="[daku]" alt="[大哭]"></a>
                        <a data-emoji="[haixiu]" alt="[害羞]"></a>
                        
                        <a data-emoji="[bizui]" alt="[闭嘴]"></a>
                        <a data-emoji="[shuijiao]" alt="[睡觉]"></a>
                        <a data-emoji="[ku]" alt="[哭]"></a>
                        <a data-emoji="[liuhan]" alt="[流汗]"></a>
                        <a data-emoji="[fanu]" alt="[发怒]"></a>
                        <a data-emoji="[zhayan]" alt="[眨眼]"></a>
                        <a data-emoji="[ziya]" alt="[龇牙]"></a>

                        <a data-emoji="[jingya]" alt="[惊讶]"></a>
                        <a data-emoji="[aoman]" alt="[傲慢]"></a>
                        <a data-emoji="[deyi]" alt="[得意]"></a>
                        <a data-emoji="[kelian]" alt="[可怜]"></a>
                        <a data-emoji="[baibai]" alt="[拜拜]"></a>
                        <a data-emoji="[kaixin]" alt="[开心]"></a>
                        <a data-emoji="[outu]" alt="[呕吐]"></a>
                    </div>
                    <div class="slider-slide">
                        <a data-emoji="[fendou]" alt="[奋斗]"></a>
                        <a data-emoji="[huaixiao]" alt="[坏笑]"></a>
                        <a data-emoji="[ganga]" alt="[尴尬]"></a>
                        <a data-emoji="[jingxia]" alt="[惊吓]"></a>
                        <a data-emoji="[dahaqian]" alt="[打哈欠]"></a>
                        <a data-emoji="[baiyan]" alt="[白眼]"></a>
                        <a data-emoji="[bishi]" alt="[鄙视]"></a>
                        
                        <a data-emoji="[chouyan]" alt="[抽烟]"></a>
                        <a data-emoji="[qiaotou]" alt="[敲头]"></a>
                        <a data-emoji="[qingqing]" alt="[亲亲]"></a>
                        <a data-emoji="[gongxi]" alt="[恭喜]"></a>
                        <a data-emoji="[jianxiao]" alt="[奸笑]"></a>
                        <a data-emoji="[maren]" alt="[骂人]"></a>
                        <a data-emoji="[qiu]" alt="[糗]"></a>

                        <a data-emoji="[shangxin]" alt="[伤心]"></a>
                        <a data-emoji="[shouweiqu]" alt="[受委屈]"></a>
                        <a data-emoji="[touxiao]" alt="[偷笑]"></a>
                        <a data-emoji="[wabikong]" alt="[挖鼻孔]"></a>
                        <a data-emoji="[weiqu]" alt="[委屈]"></a>
                        <a data-emoji="[wen]" alt="[问]"></a>
                        <a data-emoji="[cahan]" alt="[擦汗]"></a>
                    </div>
                    
                    <div class="slider-slide">
                        <a data-emoji="[zuohengheng]" alt="[左哼哼]"></a>
                        <a data-emoji="[youhengheng]" alt="[右哼哼]"></a>
                        <a data-emoji="[yun]" alt="[晕]"></a>
                        <a data-emoji="[daxiao]" alt="[大笑]"></a>
                        <a data-emoji="[xia]" alt="[吓]"></a>
                        <a data-emoji="[kun]" alt="[困]"></a>
                        <a data-emoji="[xu]" alt="[嘘]"></a>

                        <a data-emoji="[jiayou]" alt="[加油]"></a>
                        <a data-emoji="[qiang]" alt="[强]"></a>
                        <a data-emoji="[iloveyou]" alt="[我爱你]"></a>
                        <a data-emoji="[chajin]" alt="[差劲]"></a>
                        <a data-emoji="[no]" alt="[No]"></a>
                        <a data-emoji="[ok]" alt="[Ok]"></a>
                        <a data-emoji="[ruo]" alt="[弱]"></a>

                        <a data-emoji="[baoquan]" alt="[抱拳]"></a>
                        <a data-emoji="[woshou]" alt="[握手]"></a>
                        <a data-emoji="[yeah]" alt="[Yeah]"></a>
                        <a data-emoji="[lai]" alt="[来]"></a>
                        <a data-emoji="[zhutou]" alt="[猪头]"></a>
                        <a data-emoji="[xin]" alt="[心]"></a>
                        <a data-emoji="[xinsui]" alt="[心碎]"></a>
                    </div>
                    <div class="slider-slide">
                        <a data-emoji="[baobao]" alt="[抱抱]"></a>
                        <a data-emoji="[hongchun]" alt="[红唇]"></a>
                        <a data-emoji="[caidao]" alt="[菜刀]"></a>
                        <a data-emoji="[taiyang]" alt="[太阳]"></a>
                        <a data-emoji="[yewan]" alt="[夜晚]"></a>
                        <a data-emoji="[kulou]" alt="[骷髅]"></a>
                        <a data-emoji="[huaxiele]" alt="[花谢了]"></a>

                        <a data-emoji="[dangao]" alt="[蛋糕]"></a>
                        <a data-emoji="[kafei]" alt="[咖啡]"></a>
                        <a data-emoji="[zuqiu]" alt="[足球]"></a>
                        <a data-emoji="[kulou]" alt="[骷髅]"></a>
                        <a data-emoji="[xigua]" alt="[西瓜]"></a>
                        <a data-emoji="[zhadan]" alt="[炸弹]"></a>
                        <a data-emoji="[lanqiu]" alt="[篮球]"></a>

                        <a data-emoji="[liwu]" alt="[礼物]"></a>
                        <a data-emoji="[dabian]" alt="[大便]"></a>
                        <a data-emoji="[meigui]" alt="[玫瑰]"></a>
                        <a data-emoji="[mifan]" alt="[米饭]"></a>
                        <a data-emoji="[piaochong]" alt="[瓢虫]"></a>
                        <a data-emoji="[pijiu]" alt="[啤酒]"></a>
                        <a data-emoji="[shandian]" alt="[闪电]"></a>
                    </div>
                    </div>
                    <div class="slider-pagination"></div>
                </div>
                <figcaption>
                    <div class="inputbox basketline">
                        <textarea class="input-pre"></textarea>
                        <div class="hline"></div>
                    </div>
                    <a class="button grayscale outline" href="javascript:sent()">发送</a>
                </figcaption>
            </figure>
            <div class="mask"></div>
        </footer>
    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script>
        var slider=null;
        var richinput=new Richinput("#ID-RichInput",{
            onActive:function(){
                if(!slider)slider=new Slider("#ID-RichInput-slider",{
                    pagination:".slider-pagination"
                });
            }
        });
        var richContainer=richinput.container;
        var textarea=document.querySelector("#ID-RichInput textarea");
        var toast=new Toast("输入内容不能为空");
        var formControls=new FormControls();
        var chatContainer=document.getElementById("ID-Chats");
        //发送消息
        function sent(){
            if(textarea.value==""){
                toast.show();
                return;
            }
            richContainer.classList.remove("active");
            var html='<li class="even">'+
                '<div class="chat-photo">'+
                    '<div class="photo size40 radiusround"><i class="icon icon-user-fill"></i></div>'+
                '</div>'+
                '<div class="chat-content-box">'+
                    '<div class="chat-content">'+
                        '<p>'+Emoji.parse(textarea.value)+'</p>'+
                    '</div>'+
                '</div>'+
            '</li>';
            chatContainer.innerHTML+=html;
            textarea.value="";
            scrollToBottom();
        }
        //动画滚动至底部
        var scrollbox=document.body;
        var scrollboxHeight=scrollbox.clientHeight;
        function scrollToBottom(){
            scrollbox.scrollTop+=10;
            if(scrollbox.scrollTop+scrollboxHeight<scrollbox.scrollHeight){
                requestAnimationFrame(scrollToBottom);
            }
        }
        //定义exmobi返回
        function back(){history.go(-1);}
    </script>
</body>
</html>